<template>
  <div class="header">
    <!-- 去总数据和各种手机数据的两个链接 -->
    <router-link to="/home" title="传下去的数据">
      <el-tooltip
        class="item"
        effect="dark"
        content="欢迎来到数据机"
        placement="bottom"
      >
        <img class="imgLogo" :src="imgUrl" />
      </el-tooltip>
    </router-link>
    <!-- 手机logo链接 -->
    <ul>
      <li v-for="item in phonePics" :key="item.id">
        <router-link
          :to="{ path: '/home/phoneDetail', query: { id: item.brand } }"
        >
          <!-- 提示 -->
          <el-tooltip
            class="item"
            effect="dark"
            :content="item.brand"
            placement="top-start"
          >
            <img
              :src="'http://localhost:8081' + item.brand_logo"
              alt="图片加载失败"
            />
            <!-- <img :src="item.brand_logo" alt="图片" /> -->
          </el-tooltip>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      imgUrl: require("../../../assets/phone_topic.png"),
      phonePics: [],
    };
  },

  mounted() {
    let that = this;
    // 后端接口取数据
    axios({
      method: "get",
      url: "http://localhost:8081/api/brand/brandInfo",
    }).then((res) => {
      // console.log("数据：", res.data.data);
      that.phonePics = res.data.data;
      // console.log("that.phonePics数据：", that.phonePics);
      for (var i = 0; i < that.phonePics.length; i++) {
        // console.log(that.phonePics[i].brand);
      }
      // console.log("数据：", this.phonePics[0].logo);
    });
  },
};
</script>

<style lang="less" scoped>
.header {
  background-color: rgb(223, 250, 125);
  height: 100%;
  position: relative;
  // imglogo和手机品牌照片同一行
  display: flex;
  // 莫名其妙的往下移，如果后面出现往上移动的情况，调整下面的才行(已修复)
  // margin-top: -1rem;
  .imgLogo {
    // position: absolute;
    width: 2rem;
    height: 2rem;
    // top: 50%;
    margin-top: 0.875rem;
    margin-left: 0.875rem;
  }

  ul {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    li {
      width: 32px;
      height: 32px;
      float: left;
      img {
        position: absolute;
        width: 2rem;
        height: 2rem;
        top: 50%;
        margin-top: -1rem;
      }
    }
  }
}
</style>
